<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas梦幻星空背景</title>
<style>
	*{margin: 0;padding: 0;}
	html,body{height: 100%;}
	body{background: linear-gradient(to bottom, #131313 0%,#02101c 100%);}
	.canvas-box{position: fixed;left: 0;top: 0;z-index: -1;}
	.box{position: absolute;z-index: 10;color:#fff;font-family: Arial;left: 50%;top:50%;transform: translate(-50%,-50%);text-align: center;}
	a:link,a:hover,a:visited,a:active{text-decoration: none;color: inherit;display: block;}
	a{margin: 30px 0;font-size: 20px;}
</style>
</head>
<body>

<div class="canvas-box">
	<canvas id="canvas">你的浏览器不支持canvas</canvas>
</div>
<div>
	<h2 style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; color: rgb(51, 51, 51); font-size: 31px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px; white-space: normal;">
		2017<span class="anchor-target" id="year_2017" style="position: absolute; margin-top: -80px; padding-top: 80px;"></span><a href="http://xiaokedada.com/#year_2017" name="year_2017" class="anchor glyphicon glyphicon-link" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: transparent; position: absolute; top: auto; font-family: &quot;Glyphicons Halflings&quot;; font-size: 18px; padding: 10px 10px 10px 25px; width: 60px; margin-bottom: -3px;"></a>
	</h2>
	<h3 id="month_2017_July" style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; font-weight: 500; color: rgb(51, 51, 51); font-size: 24px; margin-top: 30px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px; white-space: normal;">
		July
	</h3>
	<div style="font-family: Gotham, &quot;Microsoft YaHei&quot;, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; white-space: normal;">
		<div class="breadcrumb clearfix" style="padding-left: 22px;">
			<div>
				<h3 style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; font-weight: 500; color: inherit; font-size: 24px; margin-top: 13px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px;">
					<a class="color-title" rel="nofollow" href="http://xiaokedada.com/2017/07/20/Clean-Code/" target="_blank" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: inherit; transition: all 0.3s; border-left: 6px solid rgb(111, 112, 113); padding-left: 12px; font-weight: 700;">编写自己的代码库</a>
				</h3>
			</div>
			<div class="excerpt" style="margin: 6px 0px 20px;">
				<p>
					做好基本总结，对于每一个程序员来讲都是重要的。最近看到一篇文章，文中说。
				</p>
				<blockquote style="border-left-width: 4px;">
					<p style="color: rgb(122, 122, 122); line-height: 1.25;">
						前端工程师要忘记前端二字。
					</p>
				</blockquote>
				<p>
					我深为折服，也颇为赞同。程序员所面临的无非是一个个问题，所做的也是解决一个一个难题。所谓语言、框架、工具、策略都是为了解决问题而服务的。很多人觉得JavaScript只能做一些写写脚本这一类前端的事，如果单纯这样去考虑，眼光未免太狭隘了。<span style="font-weight: 700;">JavaScript大有所为</span>，只有你想不到的，没有你做不到的，只有开拓语言的新应用范围，才能做到<span style="font-weight: 700;">创造力</span>，而不是单纯的紧跟时代所趋或追求于所谓的再创造力。
				</p>
				<p>
					周杰伦有一次接受采访，说，我从不关心流行，我创造流行(有待考据)。盲目去追求时代热潮也是不可取的，但这并不意味你要固步自封。良好的知识储备是必要的，是一切发展的基石。所以，不要看我们是前端程序员，算法、数据库、编译原理、操作系统等都应该具备。
				</p>
				<p>
					所以，勉励自己。
				</p>
			</div>
			<p>
				<span class="date-artical pull-left lh30" style="line-height: 30px; color: rgb(161, 161, 161); font-size: 12px;">July 20 , 2017&nbsp;<a class="tags-title" href="http://xiaokedada.com/tag/#Interview-ref" style="background: rgb(185, 200, 224); color: rgb(44, 77, 104); padding: 2px 4px; border-radius: 5px; margin-left: 18px;">Interview</a>&nbsp;</span><a class="btn btn-primary pull-right" rel="nofollow" href="http://xiaokedada.com/2017/07/20/Clean-Code/" target="_blank" style="background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); line-height: 1.42857; border-radius: 4px;">阅读全文</a>
			</p>
		</div>
		<hr/>
		<div class="breadcrumb clearfix" style="padding-left: 22px;">
			<div>
				<h3 style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; font-weight: 500; color: inherit; font-size: 24px; margin-top: 13px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px;">
					<a class="color-title" rel="nofollow" href="http://xiaokedada.com/2017/07/15/Flex/" target="_blank" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: inherit; transition: all 0.3s; border-left: 6px solid rgb(111, 112, 113); padding-left: 12px; font-weight: 700;">Flexbox的完全教程[翻译]</a>
				</h3>
			</div>
			<div class="excerpt" style="margin: 6px 0px 20px;">
				<p>
					文章翻译自<a href="https://css-tricks.com/" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">CSS-TRICKS</a>的<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">A Complete Guide to Flexbox</a>。本译文会在不破坏原文的基础上进行删除和修正。
				</p>
				<p>
					弹性盒布局(Flexbox Layout)旨在为容器(container)内的项目(item)的布局、对齐和空间分配提供一个更为便捷的方式，即便它们的尺寸是未知的或可变(弹性)的。
				</p>
				<p>
					它的主要思想是，让容器可以改变子元素(项目)的宽度和长度，从而充分地填充空间。一个弹性容器通过扩展子元素可以有效地填满自由空间，或者收缩它们以防止溢出。
				</p>
			</div>
			<p>
				<span class="date-artical pull-left lh30" style="line-height: 30px; color: rgb(161, 161, 161); font-size: 12px;">July 15 , 2017&nbsp;<a class="tags-title" href="http://xiaokedada.com/tag/#CSS-ref" style="background: rgb(185, 200, 224); color: rgb(44, 77, 104); padding: 2px 4px; border-radius: 5px; margin-left: 18px;">CSS</a>&nbsp;</span><a class="btn btn-primary pull-right" rel="nofollow" href="http://xiaokedada.com/2017/07/15/Flex/" target="_blank" style="background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); line-height: 1.42857; border-radius: 4px;">阅读全文</a>
			</p>
		</div>
		<hr/>
		<div class="breadcrumb clearfix" style="padding-left: 22px;">
			<div>
				<h3 style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; font-weight: 500; color: inherit; font-size: 24px; margin-top: 13px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px;">
					<a class="color-title" rel="nofollow" href="http://xiaokedada.com/2017/07/12/Angular-Third/" target="_blank" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: inherit; transition: all 0.3s; border-left: 6px solid rgb(111, 112, 113); padding-left: 12px; font-weight: 700;">Angular4第三课 -- 从Heroes的栗子看Angular</a>
				</h3>
			</div>
			<div class="excerpt" style="margin: 6px 0px 20px;">
				<p>
					Angular系列教程:
				</p>
				<ul style="margin-bottom: 10px;" class=" list-paddingleft-2">
					<li>
						<p>
							<a href="http://xiaokedada.com/2017/07/04/First-Meet-Angular" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">Angular4第一课 – 启动</a>
						</p>
					</li>
					<li>
						<p>
							<a href="http://xiaokedada.com/2017/07/06/Angular-Second" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">Angular4第二课 – 基本概念解析</a>
						</p>
					</li>
				</ul>
				<p>
					为了学习Angular，实现了主页教程的<code class="highlighter-rouge" style="font-size: 12.6px; font-family: monaco, Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; white-space: nowrap; color: rgb(139, 0, 139);">Heroes</code>例子。代码放在仓库<a href="https://github.com/maoxiaoke/Angular4-heroes" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">Angular4-heroes</a>下。但是，希望写单独为此写一篇的目的在于，这是一个非常好的例子，通过这个例子，我们可以详细地了解Angular有关<span style="font-weight: 700;">表单</span>、<span style="font-weight: 700;">服务</span>、<span style="font-weight: 700;">注入</span>、<span style="font-weight: 700;">HTTP</span>、<span style="font-weight: 700;">路由</span>等概念，所以非常值得初学者学习。
				</p>
			</div>
			<p>
				<span class="date-artical pull-left lh30" style="line-height: 30px; color: rgb(161, 161, 161); font-size: 12px;">July 12 , 2017&nbsp;<a class="tags-title" href="http://xiaokedada.com/tag/#Angular-ref" style="background: rgb(185, 200, 224); color: rgb(44, 77, 104); padding: 2px 4px; border-radius: 5px; margin-left: 18px;">Angular</a>&nbsp;</span><a class="btn btn-primary pull-right" rel="nofollow" href="http://xiaokedada.com/2017/07/12/Angular-Third/" target="_blank" style="background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); line-height: 1.42857; border-radius: 4px;">阅读全文</a>
			</p>
		</div>
		<hr/>
		<div class="breadcrumb clearfix" style="padding-left: 22px;">
			<div>
				<h3 style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; font-weight: 500; color: inherit; font-size: 24px; margin-top: 13px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px;">
					<a class="color-title" rel="nofollow" href="http://xiaokedada.com/2017/07/06/Angular-Second/" target="_blank" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: inherit; transition: all 0.3s; border-left: 6px solid rgb(111, 112, 113); padding-left: 12px; font-weight: 700;">Angular4第二课 -- 基本概念解析</a>
				</h3>
			</div>
			<div class="excerpt" style="margin: 6px 0px 20px;">
				<p>
					Angular系列教程:
				</p>
				<ul style="margin-bottom: 10px;" class=" list-paddingleft-2">
					<li>
						<p>
							<a href="http://xiaokedada.com/2017/07/04/First-Meet-Angular" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">Angular4第一课 – 启动</a>
						</p>
					</li>
					<li>
						<p>
							<a href="http://xiaokedada.com/2017/07/12/Angular-Third" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">Angular4第三课 – 从Heroes的栗子看Angular</a>
						</p>
					</li>
				</ul>
				<p>
					上一节中主要是介绍了Angular的启动和命令。这一节仍然是介绍基础概念，而且，而且，而且(重要的事情说三遍)，这一节也主要参考<a href="https://angular.io/guide/architecture" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">官网的这篇文章</a>，所以呢，大致会一样。
				</p>
			</div>
			<p>
				<span class="date-artical pull-left lh30" style="line-height: 30px; color: rgb(161, 161, 161); font-size: 12px;">July 6 , 2017&nbsp;<a class="tags-title" href="http://xiaokedada.com/tag/#Angular-ref" style="background: rgb(185, 200, 224); color: rgb(44, 77, 104); padding: 2px 4px; border-radius: 5px; margin-left: 18px;">Angular</a>&nbsp;</span><a class="btn btn-primary pull-right" rel="nofollow" href="http://xiaokedada.com/2017/07/06/Angular-Second/" target="_blank" style="background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); line-height: 1.42857; border-radius: 4px;">阅读全文</a>
			</p>
		</div>
		<hr/>
		<div class="breadcrumb clearfix" style="padding-left: 22px;">
			<div>
				<h3 style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; font-weight: 500; color: inherit; font-size: 24px; margin-top: 13px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px;">
					<a class="color-title" rel="nofollow" href="http://xiaokedada.com/2017/07/04/First-Meet-Angular/" target="_blank" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: inherit; transition: all 0.3s; border-left: 6px solid rgb(111, 112, 113); padding-left: 12px; font-weight: 700;">Angular4第一课 -- 启动</a>
				</h3>
			</div>
			<div class="excerpt" style="margin: 6px 0px 20px;">
				<p>
					Angular系列教程:
				</p>
				<ul style="margin-bottom: 10px;" class=" list-paddingleft-2">
					<li>
						<p>
							<a href="http://xiaokedada.com/2017/07/06/Angular-Second" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">Angular4第二课 – 基本概念解析</a>
						</p>
					</li>
					<li>
						<p>
							<a href="http://xiaokedada.com/2017/07/12/Angular-Third" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">Angular4第三课 – 从Heroes的栗子看Angular</a>
						</p>
					</li>
				</ul>
				<blockquote style="border-left-width: 4px;">
					<p style="color: rgb(122, 122, 122); line-height: 1.25;">
						One framework. Mobile &amp; desktop.<span style="position: relative; font-size: 10.5px; line-height: 0; vertical-align: baseline; top: -0.5em;"><a href="https://angular.io/" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">来源</a></span>
					</p>
				</blockquote>
				<p>
					而Angular是什么呢？我看到这句话
				</p>
				<blockquote style="border-left-width: 4px;">
					<p style="color: rgb(122, 122, 122); line-height: 1.25;">
						Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges.<span style="position: relative; font-size: 10.5px; line-height: 0; vertical-align: baseline; top: -0.5em;"><a href="https://angular.io/docs" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">来源</a></span>
					</p>
				</blockquote>
				<p>
					上面说，Angular是一个框架，还整合了声明式模板、依赖注入和端对端工具。具体点呢？
				</p>
			</div>
			<p>
				<span class="date-artical pull-left lh30" style="line-height: 30px; color: rgb(161, 161, 161); font-size: 12px;">July 4 , 2017&nbsp;<a class="tags-title" href="http://xiaokedada.com/tag/#Angular-ref" style="background: rgb(185, 200, 224); color: rgb(44, 77, 104); padding: 2px 4px; border-radius: 5px; margin-left: 18px;">Angular</a>&nbsp;</span><a class="btn btn-primary pull-right" rel="nofollow" href="http://xiaokedada.com/2017/07/04/First-Meet-Angular/" target="_blank" style="background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); line-height: 1.42857; border-radius: 4px;">阅读全文</a>
			</p>
		</div>
		<hr/>
		<div class="breadcrumb clearfix" style="padding-left: 22px;">
			<div>
				<h3 style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; font-weight: 500; color: inherit; font-size: 24px; margin-top: 13px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px;">
					<a class="color-title" rel="nofollow" href="http://xiaokedada.com/2017/07/01/First-Meet-TypeScript/" target="_blank" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: inherit; transition: all 0.3s; border-left: 6px solid rgb(111, 112, 113); padding-left: 12px; font-weight: 700;">TypeScript详解</a>
				</h3>
			</div>
			<div class="excerpt" style="margin: 6px 0px 20px;">
				<blockquote style="border-left-width: 4px;">
					<p style="color: rgb(122, 122, 122); line-height: 1.25;">
						TypeScript is a typed superset of JavaScript that compiles to plain JavaScript<span style="position: relative; font-size: 10.5px; line-height: 0; vertical-align: baseline; top: -0.5em;"><a href="http://www.typescriptlang.org/index.html" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">来源</a></span>.
					</p>
				</blockquote>
				<p>
					这意味着所有的<code class="highlighter-rouge" style="font-size: 12.6px; font-family: monaco, Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; white-space: nowrap; color: rgb(139, 0, 139);">ES6</code>代码都是完全有效的且可编译的TypeScript代码(通俗一点，就是任何合法的JavaScript程序都是合法的TypeScript程序)。
				</p>
				<p>
					<span style="font-weight: 700;">为什么我们需要使用TypeScript呢？</span>目前广泛应用的JavaScript标准还是ES5，在如今大规模JavaScript应用中，由于它缺乏很多必要的特性，一些可维护性问题就暴露出来了。ES6旨在解决上述可维护性问题，但并没有完全实现，其次该标准的广泛采用，也是个漫长的过程。TypeScript应运而生，其中类型检查是它的一个非常重要的特性。
				</p>
				<p>
					<span style="font-weight: 700;">如何学习TypeScript？</span>目前我推荐的是<a href="http://www.typescriptlang.org/index.html" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">官方的语言主页</a>和该语言开源仓库的<a href="https://github.com/Microsoft/TypeScript/wiki" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(67, 117, 158);">wiki主页</a>，我尤其推荐后者，非常便于学习和查询。
				</p>
			</div>
			<p>
				<span class="date-artical pull-left lh30" style="line-height: 30px; color: rgb(161, 161, 161); font-size: 12px;">July 1 , 2017&nbsp;<a class="tags-title" href="http://xiaokedada.com/tag/#TypeScript-ref" style="background: rgb(185, 200, 224); color: rgb(44, 77, 104); padding: 2px 4px; border-radius: 5px; margin-left: 18px;">TypeScript</a>&nbsp;</span><a class="btn btn-primary pull-right" rel="nofollow" href="http://xiaokedada.com/2017/07/01/First-Meet-TypeScript/" target="_blank" style="background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); line-height: 1.42857; border-radius: 4px;">阅读全文</a>
			</p>
		</div>
		<hr/>
		<h3 id="month_2017_June" style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; font-weight: 500; color: inherit; font-size: 24px; margin-top: 30px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px;">
			June
		</h3>
		<ul style="margin-bottom: 10px;" class=" list-paddingleft-2">
			<div class="breadcrumb clearfix" style="padding-left: 22px;">
				<div>
					<h3 style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; font-weight: 500; color: inherit; font-size: 24px; margin-top: 13px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px;">
						<a class="color-title" rel="nofollow" href="http://xiaokedada.com/2017/06/27/Graph-theory/" target="_blank" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: inherit; transition: all 0.3s; border-left: 6px solid rgb(111, 112, 113); padding-left: 12px; font-weight: 700;">这一点点的图论基础</a>
					</h3>
				</div>
				<div class="excerpt" style="margin: 6px 0px 20px;">
					<p>
						图也是一种非线性的数据结构，是网络结构的抽象模型，是一组由<em>边</em>连接的<em>节点</em>。图的表示法:
					</p>
					<p>
						<code class="highlighter-rouge" style="font-size: 12.6px; font-family: monaco, Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; white-space: nowrap; color: rgb(139, 0, 139);">G = (V,E)</code>，其中<code class="highlighter-rouge" style="font-size: 12.6px; font-family: monaco, Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; white-space: nowrap; color: rgb(139, 0, 139);">V</code>表示一组节点，<code class="highlighter-rouge" style="font-size: 12.6px; font-family: monaco, Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; white-space: nowrap; color: rgb(139, 0, 139);">E</code>表示一组边。
					</p>
					<p>
						图论的理解有点难度，这里也是介绍一些基本点，仅仅包括图的表示和遍历。因为图论又有好多图，实在是好累。
					</p>
				</div>
				<p>
					<span class="date-artical pull-left lh30" style="line-height: 30px; color: rgb(161, 161, 161); font-size: 12px;">June 27 , 2017&nbsp;<a class="tags-title" href="http://xiaokedada.com/tag/#Algorithms-ref" style="background: rgb(185, 200, 224); color: rgb(44, 77, 104); padding: 2px 4px; border-radius: 5px; margin-left: 18px;">Algorithms</a>&nbsp;</span><a class="btn btn-primary pull-right" rel="nofollow" href="http://xiaokedada.com/2017/06/27/Graph-theory/" target="_blank" style="background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); line-height: 1.42857; border-radius: 4px;">阅读全文</a>
				</p>
			</div>
			<hr/>
			<div class="breadcrumb clearfix" style="padding-left: 22px;">
				<div>
					<h3 style="font-family: Gotham, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, sans-serif; font-weight: 500; color: inherit; font-size: 24px; margin-top: 13px; margin-bottom: 15px; position: relative; padding-left: 60px; margin-left: -45px;">
						<a class="color-title" rel="nofollow" href="http://xiaokedada.com/2017/06/26/Tree/" target="_blank" style="background-image: initial; background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: inherit; transition: all 0.3s; border-left: 6px solid rgb(111, 112, 113); padding-left: 12px; font-weight: 700;">树的基础</a>
					</h3>
				</div>
				<div class="excerpt" style="margin: 6px 0px 20px;">
					<p>
						树也是一种非线性的数据结构。它对于存储需要快速查找的数据非常有用。有关树的常用术语有:
					</p>
					<ul class=" list-paddingleft-2">
						<li>
							<p>
								根节点，这个好理解，不多说
							</p>
						</li>
						<li>
							<p>
								子树，子树由节点和它的后代构成
							</p>
						</li>
						<li>
							<p>
								节点的深度，节点的深度取决于它的祖先节点的数量
							</p>
						</li>
						<li>
							<p>
								树的深度，就是所有节点深度的最大值
							</p>
						</li>
					</ul>
					<p>
						废话不多说，其实我们对这种结构还是理解挺多的。
					</p>
				</div>
				<p>
					<span class="date-artical pull-left lh30" style="line-height: 30px; color: rgb(161, 161, 161); font-size: 12px;">June 26 , 2017&nbsp;<a class="tags-title" href="http://xiaokedada.com/tag/#Algorithms-ref" style="background: rgb(185, 200, 224); color: rgb(44, 77, 104); padding: 2px 4px; border-radius: 5px; margin-left: 18px;">Algorithms</a>&nbsp;</span><a class="btn btn-primary pull-right" rel="nofollow" href="http://xiaokedada.com/2017/06/26/Tree/" target="_blank" style="background-position: 0px 0px; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); line-height: 1.42857; border-radius: 4px;">阅读全文</a>
				</p>
			</div>
			<div class="breadcrumb clearfix" style="padding-left: 22px;"></div>
		</ul>
	</div>
	<p>
		<br/>
	</p>
</div>
<script>
	var WINDOW_WIDTH = document.body.offsetWidth;
	var WINDOW_HEIGHT = document.body.offsetHeight;
	var canvas,context;
	var num = 500;
	var stars = [];
	var mouseX = WINDOW_WIDTH/2;
	var mouseY = WINDOW_HEIGHT/2;
	var rnd;
	
	window.onload = function(){
		canvas = document.getElementById('canvas');
		canvas.width = WINDOW_WIDTH;
		canvas.height = WINDOW_HEIGHT;

		context = canvas.getContext('2d');

		addStar();
		setInterval(render,33);
		liuxing();

		// render();
		document.body.addEventListener('mousemove',mouseMove);
	}

	function liuxing(){
		var time = Math.round(Math.random()*3000+33);
		setTimeout(function(){
			rnd = Math.ceil(Math.random()*stars.length)
			liuxing();
		},time)
	}

	function mouseMove(e){
		//因为是整屏背景，这里不做坐标转换
		mouseX = e.clientX;
		mouseY = e.clientY;
	}

	function render(){
		context.fillStyle = 'rgba(0,0,0,0.1)';
		context.fillRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
		// context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
		for(var i =0; i<num ; i++){
			var star = stars[i];
			if(i == rnd){
				star.vx = -5;
				star.vy = 20;
				context.beginPath();
				context.strokeStyle = 'rgba(255,255,255,'+star.alpha+')';
				context.lineWidth = star.r;
				context.moveTo(star.x,star.y);
				context.lineTo(star.x+star.vx,star.y+star.vy);
				context.stroke();
				context.closePath();
			}
			star.alpha += star.ra;
			if(star.alpha<=0){
				star.alpha = 0;
				star.ra = -star.ra;
				star.vx = Math.random()*0.2-0.1;
				star.vy = Math.random()*0.2-0.1;
			}else if(star.alpha>1){
				star.alpha = 1;
				star.ra = -star.ra
			}
			star.x += star.vx;
			if(star.x>=WINDOW_WIDTH){
				star.x = 0;
			}else if(star.x<0){
				star.x = WINDOW_WIDTH;
				star.vx = Math.random()*0.2-0.1;
				star.vy = Math.random()*0.2-0.1;
			}
			star.y += star.vy;
			if(star.y>=WINDOW_HEIGHT){
				star.y = 0;
				star.vy = Math.random()*0.2-0.1;
				star.vx = Math.random()*0.2-0.1;
			}else if(star.y<0){
				star.y = WINDOW_HEIGHT;
			}
			context.beginPath();
			var bg = context.createRadialGradient(star.x, star.y, 0, star.x, star.y, star.r);
			bg.addColorStop(0,'rgba(255,255,255,'+star.alpha+')')
			bg.addColorStop(1,'rgba(255,255,255,0)')
			context.fillStyle  = bg;
			context.arc(star.x,star.y, star.r, 0, Math.PI*2, true);
			context.fill();
			context.closePath();
		}
	}

	function addStar(){
		for(var i = 0; i<num ; i++){
			var aStar = {
				x:Math.round(Math.random()*WINDOW_WIDTH),
				y:Math.round(Math.random()*WINDOW_HEIGHT),
				r:Math.random()*3,
				ra:Math.random()*0.05,
				alpha:Math.random(),
				vx:Math.random()*0.2-0.1,
				vy:Math.random()*0.2-0.1
			}
			stars.push(aStar);
		}
	}
</script>
</body>
</html>